<!--
 作者：ex_wangshuai
 日期：2016-11-02
 功能：首页-知己彼-首页
 参数：
 事件：
-->
<template>
  <div class="industry">
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        @click="this.$broadcast('goBack')"
        slot="left-button">
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'>
      </div>
    </toolbar>
    <div class="content">
      <div @click="goIndus" class="part indus">
        <p class="fs40">行业罗盘</p>
        <p>眼观六路，耳听八方</p>
      </div>
      <div @click="goBrand" class="part brand">
        <p class="fs40">品牌军师</p>
        <p>知己知彼，克敌制胜</p>
      </div>
      <div @click="goProduct" class="part product">
        <p class="fs40">产品顾问</p>
        <p>能力全面，内外兼修</p>
      </div>
      <div @click="goQuality" class="part quality">
        <p class="fs40">品质卫士</p>
        <p>问题排解，专项整改</p>
      </div>
    </div>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    data () {
      var data = {}
      data.show = false
      data.viewTitle = '掌大局'
      data.tabList = []
      data.activeStyle = 0
      data.contentList = []
      data.isEdit = false
      data.collectedAll = []
      data.indusLink = ''
      data.brandLink = ''
      data.productLink = ''
      data.qualityLink = ''
      data.menuOpenState = false
      return data
    },
    components: {
      Toolbar,
      Confirm
    },
    methods: {
      goBack: function () {
        this.show = true
      },
      exitApp: function () {
        var isConfrimed = window.confirm('确认退出？')
        if (isConfrimed === false) {
          return
        }
        window.cordova.exec(function (success) {
        }, function (error) {
          window.alert('Error: ' + error)
        }, 'MideaCommon', 'exit', [])
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      },
      goIndus: function () {
        this.$route.router.go('/industry/' + this.indusLink + '?key=' + this.indusLink)
      },
      goBrand: function () {
        this.$route.router.go('/industry/' + this.brandLink + '?key=' + this.brandLink)
      },
      goProduct: function () {
        this.$route.router.go('/industry/' + this.productLink + '?key=' + this.productLink)
      },
      goQuality: function () {
        this.$route.router.go('/industry/' + this.qualityLink + '?key=' + this.qualityLink)
      },
      showSlideMenu: function () {
        this.menuOpenState = !this.menuOpenState
      }
    },
    created () {
      this.$http.post(window.interface.indusNav, {}).then(function (res) {
        var resData = res.json().data
        var mkeyAll = []
        var tabList = []
        var contentList = []
        for (var i = 0; i < resData.length; i++) {
          // 导航列表数据
          tabList.push({'order': resData[i].order - 1, 'name': resData[i].name})
          contentList.push(resData[i].childs)
          // 得到所有的mkey
          for (var j = 0; j < resData[i].childs.length; j++) {
            for (var k = 0; k < resData[i].childs[j].childs.length; k++) {
              mkeyAll.push(resData[i].childs[j].childs[k].mkey)
            }
          }
        }
        // 列表数据存入localstorage
        window.sessionStorage.setItem('indusTabList', JSON.stringify(tabList))
        window.sessionStorage.setItem('indusContentList', JSON.stringify(contentList))
        // mkey数组存入localStorage，用于页面翻页
        window.sessionStorage.setItem('indusMkeyAll', JSON.stringify(mkeyAll))
        this.indusLink = resData[0].childs[0].childs[0].mkey
        this.brandLink = resData[1].childs[0].childs[0].mkey
        this.productLink = resData[2].childs[0].childs[0].mkey
        this.qualityLink = resData[3].childs[0].childs[0].mkey
      })
    },
    ready: function () {
      this.$dispatch('changeLoadingStatus', false)
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    margin-top: 9vh;
    margin-bottom: 7vh;
  }

  .part{
    margin: .3rem auto 0;
    padding: .8rem .3rem;
    text-align: right;
    width: 80%;
    color: #FFF;
  }

  .indus{
    background: url("../../../static/img/indus/industry@3x.png") no-repeat center / 100% 100%;
  }

  .brand{
    background: url("../../../static/img/indus/brand@3x.png") no-repeat center / 100% 100%;
  }

  .product{
    background: url("../../../static/img/indus/product@3x.png") no-repeat center / 100% 100%;
  }

  .quality{
    background: url("../../../static/img/indus/quality@3x.png") no-repeat center / 100% 100%;
  }
</style>
